<template>
  <div class="evaluate">
    <Title></Title>
    <div class="evaluate_box">
      <div class="inner">
        <div class="evaluate_tit" >
          订单评价
        </div>
        <div class="evaluate_upload">
         <el-upload :action="url" :headers="headers" list-type="picture-card" :limit="5"
           :on-success="uploadSuccess" :on-remove="handleRemove">
           <i class="el-icon-camera"></i>
         </el-upload>
        </div>
        <div class="evaluate_star">
          <span class="star">综合评分</span>
          <el-rate v-model="fromdata.user_score"></el-rate>
        </div>
        <div class="evaluate_area">
          <textarea placeholder="多多描述商品和使用感受,更受欢迎哦" v-model="fromdata.content" @blur="inputarea" cols="30" rows="10"></textarea>
        </div>
        <div class="evaluate-btns">
          <div class="evaluate-btn" @click="evaluatefn()">提交评价</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Title from "../../components/title.vue"
  import { BASE_URL} from "../../api/config.js"
  import {evaluateapi} from "../../api/http.js"
  export default {
    name: 'evaluate',
    components: {
      Title
    },
    data() {
      return {
        fromdata:{
          order_id:"",
          sku_id:"",
          images:[],
          user_score:5,
          content:""
        },
        headers:{
          'OPENID':localStorage.getItem('user')
        },
        url:BASE_URL+'/api/user_upload/upload_img'
      }
    },
    created() {
      this.fromdata.order_id = this.$route.query.order_id
      this.fromdata.sku_id =this.$route.query.goods_sku_id
      console.log(this.$route.query);
    },
    methods: {
      // 删除图片
      handleRemove(file,fileList) {
          const filePath = file.response.data.url
          const i = this.fromdata.images.findIndex(x => x === filePath)
          this.fromdata.images.splice(i, 1)
      },
      // 图片上传成功
      uploadSuccess(response, file, fileList) {
        console.log(file, fileList);
        if (response.code == 200) {
          //状态码为200时则上传成功
          this.fromdata.images.push(response.data.url)
        } else {
          //状态码不是200时上传失败 从列表中删除
          console.log(1);
        }
      },
      //买家评论
      inputarea(){
        var addressreg = /^[^ ]/
        addressreg.test(this.fromdata.content) ? this.$message("输入正确") : this.$message("请输入正确的买家评论")
      },
     async evaluatefn() {
       var addressreg = /^[^ ]/
       if(this.fromdata.content=="" || !addressreg.test(this.fromdata.content)){
           return this.$message("请输入你的评论")
        }
        this.fromdata.images =this.fromdata.images.join(",")
        const res = await evaluateapi(this.fromdata)
        if (res.data.code==200) {
          this.$message(res.data.msg)
          this.$router.push({
            path:"/layout/meorder"
          })
        } else{
            this.$message(res.data.msg)
        }
      }
    }
  }
</script>

<style lang="less">
  .evaluate_box {
    width: 100%;

    .inner {
      width: 1300px;
      margin: 0 auto;
      padding: 10px 85px 70px 85px;
      box-sizing: border-box;

      .evaluate_tit {
        font-weight: 400;
        font-size: 16px;
        line-height: 40px;
        height: 40px;
        margin-bottom: 15px;
      }

      .evaluate_upload {
        width: 100%;
        margin-bottom: 20px;
      }

      .evaluate_star {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 40px;
        font-size: 14px;

        .star {
          margin-right: 20px;
        }
      }

      .evaluate_area {
        width: 500px;
        height: 140px;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #CCCDCE;
        margin-bottom: 20px;

        textarea {
          width: 100%;
          height: 100%;
          outline: none;
          border: none;
          resize: none;
        }
      }

      .evaluate-btns {
        width: 70%;
        display: flex;
        justify-content: center;
        align-items: center;

        .evaluate-btn {
          font-size: 16px;
          line-height: 40px;
          width: 140px;
          height: 40px;
          background: #FF4444;
          border-radius: 4px;
          color: #FFFFFF;
          text-align: center;
        }
      }
    }
  }
</style>
